/*
 * @Title: 商品分类
 * @Created by: ycq
 */
<template>
	<view>
		<view class="type-head">
			<comHeader :config="navConfig"></comHeader>
		</view>
		<view class="type-body">
			<view class="left-body">
				<view :class="menuId==item.id?'left-item-ac':'left-item'" v-for='(item,index) in menuData' :key='index' @click="chooseMenu(item.id)">
					<view class="shu" :class="menuId==item.id?'shu-act':''"></view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="right-body">
				<view class="right-list" v-for="(item,index) in goodsData" :key='index' @click="toShopType">
					<text class="right-list-name">{{item.name}}</text>
					<view class="item-crew">
						<view class="right-item" v-for="(typeItem,index) in item.typeData" :key='index'>
							<view class="item-img">
								<image :src="typeItem.img" mode="aspectFit"></image>
							</view>
							<text class="type-name">{{typeItem.type}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					comScroll:0,
					isFixed: false, //是否absolute布局
					left: {
					
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '商品分类',
						textColor: '#000',
						isShowIco:false,
						ico:'',
						icoColor:'#000'
						
					},
					right: {
						text: '',
						textColor: '#000',
						isShowRight: true,
						ico: '/static/shop/msgType.png', //右侧图标地址
						isShowRightIco: true ,//是否显示右侧图标
						ico2: '', //右侧第二个图标地址
						isShowRightIco2: false //是否显示右侧第二个图标
					}
				},
				statusBarHeight:global.statusBarHeight + 'px',
				menuId:0,
				menuData:[
					{name:'美妆',id:0},
					{name:'女装',id:1},
					{name:'鞋靴',id:2},
					{name:'箱包',id:3},
					{name:'食品',id:4},
					{name:'饰品',id:5},
					{name:'运动',id:6},
					{name:'男装',id:7},
					{name:'洗护',id:8},
					{name:'手机',id:9},
					{name:'数码',id:10},
					{name:'百货',id:11},
					{name:'保健',id:12},
				],
				goodsData:[
					{
					  name:'猜你喜欢',
					  typeData:[
						  {type:'彩妆套装',img:'/static/banner.png'},
						  {type:'隔离',img:'/static/myPic/shouchi.png'},
						  {type:'唇膏',img:'/static/banner.png'},
						  {type:'粉底',img:'/static/banner.png'},
						  {type:'口红',img:'/static/banner.png'},
						  {type:'面膜',img:'/static/banner.png'},
					  ]
					},
					{
					  name:'彩妆',
					  typeData:[
						  {type:'彩妆套装',img:'/static/banner.png'},
						  {type:'睫毛膏',img:'/static/banner.png'},
						  {type:'眼影',img:'/static/banner.png'},
						  {type:'化妆工具',img:'/static/banner.png'},
						  {type:'眼线笔',img:'/static/banner.png'},
						  {type:'修容',img:'/static/banner.png'},
					  ]
					},
					{
					  name:'护肤',
					  typeData:[
						  {type:'护肤套装',img:'/static/banner.png'},
						  {type:'面膜',img:'/static/banner.png'},
						  {type:'洁面',img:'/static/banner.png'},
						  {type:'乳液面霜',img:'/static/banner.png'},
						  {type:'男士洁面',img:'/static/banner.png'},
						  {type:'精华',img:'/static/banner.png'},
					  ]
					}
				]
			}
		},
		methods:{
			chooseMenu(id){
				this.menuId = id
			},
			toShopType(){
				uni.navigateTo({
					url:'shopType'
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			}
		},
		mounted() {
			this.getStatusTop();
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.type-head{
		width: 750upx;
		height: auto;
		/* margin-top: 70upx; */
		position: fixed;
		top: 0;
	}
	.back{
		width: 50px;
		height: 50upx;
		float: left;
	}
	.back image{
		width: 21px;
		height: 38upx;
		margin-left: 30upx;
		float: left;
	}
	.type-head text{
		display: block;
		width: 300upx;
		height: 38upx;
		margin-left: 15upx;
		line-height: 38upx;
		font-size: 34upx;
		float: left;
	}
	.type-body{
		width: 750upx;
		/* margin-top: 58upx; */
		height: calc(100vh - 60px);
		background: rgba(246,246,246,1.00);
		overflow: scroll;
		/* height: auto; */
		position: fixed;
		bottom: 0;
	}
	.left-body{
		width: 183upx;
		/* height: auto; */
		background: #FFFFFF;
		float: left;
		height: 100%;
		overflow: scroll;
	}
	.left-item{
		width: 183upx;
		height: 72upx;
		margin-bottom: 30upx;
		position: relative;
	}
	.left-item-ac{
		width: 183upx;
		height: 72upx;
		background: rgba(246,246,246,1.00);
		margin-bottom: 30upx;
		position: relative;
	}
	.left-item text,.left-item-ac text{
		width: 183upx;
		height: 72upx;
		display: block;
		position: absolute;
		text-align: center;
		line-height: 72upx;
		font-size: 30upx;
	}
	.shu{
		width: 7upx;
		height: 72upx;
		background: #FFFFFF;
		position: absolute;
	}
	.shu-act{
		background: #54A6FF;
	}
	.right-body{
		width: 522upx;
		/* height: auto; */
		height: 100%;
		overflow: scroll;
		margin-right: 25upx;
		float: right;
	}
	.right-list{
		width: 522upx;
		height: auto;
		/* margin-bottom: 20upx; */
	}
	.right-list-name{
		width: 522upx;
		height: 20upx;
		display: block;
		padding-top: 20upx;
		text-align: left;
		font-size: 26upx;
		margin-bottom: 30upx;
	}
	.right-list:nth-child(1) .right-list-name{
		width: 522upx;
		height: 40upx;
		display: block;
		text-align: left;
		padding-top: 20upx;
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 14upx;
	}
	.item-crew{
		width: 522upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		background: #FFFFFF;
		justify-content:space-between
	}
	.right-item{
		width: 140upx;
		position: relative;
		height: 200upx;
		margin-left: 17upx;
		margin-right: 17upx;
		margin-bottom: 30upx;
	}
	.item-img{
		width: 140upx;
		height: 150upx;
	}
	
	.right-item image{
		width: 140upx;
		height: 150upx;
	}
	.type-name{
		width: 140upx;
		height: 30upx;
		display: block;
		font-size: 26upx;
		position: absolute;
		text-align: center;
		bottom:0
	}
</style>
